<!-- @format -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>俄罗斯方块 单元测试</title>
    <link rel="stylesheet" href="./base.css" />
    <link rel="stylesheet" href="./pixel.css" />
</head>

<body>
    <div class="screen" id="screen-main">
        <table class="pixels">
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
    <script src="./drive.dev.js"></script>
    <script src="./Tetris.dev.js"></script>
    <script src="./Game.dev.js"></script>
    <script>
        // 获取屏幕挂载点
        const screenMain = document.querySelector("#screen-main")
        // 工具函数
        function initData(row, col) {
            return new Array(row).fill(0).map(() => new Array(col).fill(0))
        }
        /* Model  */
        // 初始化数据
        const data = initData(20, 12)
        /* View  */
        // 初始化屏幕，获取驱动函数
        const drive = getDrive(screenMain, 20, 12)
        /* Controller */
        // 初始化方块，绑定数据
        const tetris = new Tetris(data)
        // 初始化游戏，传入配置对象
        const game = new Game({ tetris, drive, data })
        window.addEventListener("keydown", (e) => {
            game.gamepad(e.key)
        })
    </script>
</body>

</html>